<template>
  <div class="container">
    <div class="left_box">
      <div class="head">
        <div class="flex">
          <div class="flex_left">
            <el-avatar :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
          <div class="flex_right">
            <h1>{{ data.username }}</h1>
            <h2>{{ mockData.introduce }}</h2>
          </div>
        </div>
        <el-button type="primary" round>
          <el-icon class="el-icon--left">
            <Promotion />
          </el-icon>
          关注我
        </el-button>
        <div class="ul_list">
          <ul>
            <li>
              <el-icon>
                <User />
              </el-icon>
              前端小白
            </li>
            <li>
              <el-icon>
                <Burger />
              </el-icon>
              1999/10/28
            </li>
            <li>
              <el-icon>
                <Male />
              </el-icon>男
            </li>
            <li>
              <el-icon>
                <Iphone />
              </el-icon>
              {{ data.mobile }}
            </li>
            <li>
              <el-icon>
                <Box />
              </el-icon>
              {{ data.email }}
            </li>
            <li>
              <el-icon>
                <School />
              </el-icon> 集团 - 事业群 - 技术部
            </li>
            <li>
              <el-icon>
                <LocationInformation />
              </el-icon>中国 • 重庆市 • 垫江县
            </li>
            <li>
              <el-icon>
                <Brush />
              </el-icon>JavaScript、HTML、CSS、Vue、Node
            </li>
          </ul>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <div class="progress">
          <ul>
            <li class="js">JavaScript</li>
            <li class="react">React</li>
            <li class="html5">HTML5</li>
            <li class="css3">CSS3</li>
            <li class="sketch">Sketch</li>
          </ul>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <p class="tag_title">个性标签</p>
        <div class="tags">
          <el-tag v-for="item in mockData.tag" :type="item.type">{{ item.name }}</el-tag>
        </div>
      </div>
    </div>
    <div class="right_box">
      <el-tabs v-model="activeName" class="tabs">
        <el-tab-pane label="基本信息" name="first">
          <!-- 表单 -->
          <el-form :model="form" label-width="80px" label-position="left">
            <el-form-item label="姓名">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="form.sex" />
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input v-model="form.introduce" type='textarea' />
            </el-form-item>
            <el-form-item label="标签">
              <el-tag style="margin: 10px 10px 0 0" :type="item.type" v-for="item in form.tag">{{ item.name }}</el-tag>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="账号绑定" name="second">
          <div v-for="item in 10">
            <div class="flex">
              <svg t="1659708092628" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="14571" width="40" height="40">
                <path
                  d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-20.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                  p-id="14572"></path>
              </svg>
              <div class="flex1">
                <p>绑定</p>
                <p>当前未绑定QQ账号</p>
              </div>
              <a>更换绑定</a>
            </div>
            <div class="divider"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
// 获取当前用户信息
const data = JSON.parse(sessionStorage.getItem('userInfo'))
// 激活tabs
let activeName = ref('first');
// 原始数据
const mockData = reactive({
  name: data.username || "",
  nickname: '前端小白',
  sex: '男',
  introduce: '少而好学，如日出之阳；壮而好学，如日中之光；老而好学，如炳烛之明。',
  tag: [
    { type: '', name: '动漫迷' },
    { type: 'success', name: '技术宅' },
    { type: 'info', name: '魔法师' },
    { type: 'warning', name: '狂战士' },
    { type: 'danger', name: '冲浪高手' }
  ]
})
// 表单数据
const form = reactive({
  name: data.username || '',
  nickname: mockData.nickname || '前端小白',
  sex: mockData.sex || '男',
  introduce: mockData.introduce || '个人简介',
  tag: mockData.tag || [
    { type: '', name: '动漫迷' },
    { type: 'success', name: '技术宅' },
    { type: 'info', name: '魔法师' },
    { type: 'warning', name: '狂战士' },
    { type: 'danger', name: '冲浪高手' }
  ]
});

// 保存按钮
const submitForm = () => {
  console.log("保存");
}
</script>

<style lang="less" scoped>
.divider {
  width: 100%;
  display: flex;
  clear: both;
  min-width: 100%;
  box-sizing: border-box;
  padding: 0;
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
  border-top: 1px solid rgba(0, 0, 0, .09);
  list-style: none;
  line-height: 1.5715;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; //媒体查询判断换不换行
  height: 100%;

  // 当屏幕小于900px时， flex-wrap: wrap;
  @media screen and (max-width: 900px) {
    flex-wrap: wrap
  }

  .left_box {
    // height: 500px; //自适应高度
    height: 100%;
    width: 100%;
    // background-color: aquamarine;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 10px;
    overflow: auto;
    // min-width: 300px;
    box-shadow: rgba(150, 150, 255, 0.4) 5px 5px, rgba(150, 150, 255, 0.3) 10px 10px, rgba(150, 150, 255, 0.2) 15px 15px, rgba(150, 150, 255, 0.1) 20px 20px, rgba(150, 150, 255, 0.05) 25px 25px;

    .head {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;

      .flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;

        .flex_left {
          width: 100px;
          height: 100px;
          margin: 10px;
          box-sizing: border-box;

          .el-avatar {
            &:hover {
              cursor: pointer;
              transition: all 3s;
              transform: rotate3d(100, 80, 80, 360deg);
            }
          }
        }

        .flex_right {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-wrap: nowrap;
          margin: 10px;

          h1 {
            font-size: 24px;
            font-weight: 500;
            margin: 10px 0;
          }

          h2 {
            font-size: 14px;
          }
        }
      }


      .ul_list>ul>li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        flex-direction: row;
        margin: 10px 0;
        font-size: 14px;
        // color: #262626;

        .el-icon {
          margin-right: 10px;
        }
      }

      // 技能进度条
      .progress {
        margin: 10px 0;

        ul {
          width: 100%;
          // display: flex;

          li {
            list-style: none;
            font-size: 14px;
            margin-bottom: 28px;
            position: relative;

            &::before {
              content: "";
              display: inline-block;
              height: 14px;
              width: 100%;
              background-color: #f4f4f5;
              position: absolute;
              left: 0px;
              top: 20px;
              border-radius: 10px;
              box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
            }

            &::after {
              content: "";
              display: inline-block;
              height: 14px;
              width: 100%;
              background-color: #1f4a59;
              position: absolute;
              left: 0px;
              top: 20px;
              border-radius: 10px;
              // background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
              animation-duration: 1.2s; //动画持续时间
              animation-fill-mode: forwards; //动画填充模式
              animation-timing-function: ease-in-out; //动画变化速度
            }
          }

          .js::after {
            background: linear-gradient(to right, #E39F24, #EFBE26);
            animation-name: js;
          }

          .react::after {
            background: linear-gradient(to right, #61dafb, #a774ff);
            animation-name: react;
          }

          .html5::after {
            background: linear-gradient(to right, #e34f26, #f16529);
            animation-name: html5;
          }

          .css3::after {
            background: linear-gradient(to right, #ff7bac, #ffa5c2);
            animation-name: css3;
          }

          .sketch::after {
            background: linear-gradient(to right, #0f0c29, #302b63);
            animation-name: sketch;
          }

          @keyframes js {
            from {
              width: 0;
            }

            to {
              width: 90%;
            }
          }

          @keyframes react {
            from {
              width: 0;
            }

            to {
              width: 80%;
            }
          }

          @keyframes html5 {
            from {
              width: 0;
            }

            to {
              width: 70%;
            }
          }

          @keyframes css3 {
            from {
              width: 0;
            }

            to {
              width: 60%;
            }
          }

          @keyframes sketch {
            from {
              width: 0;
            }

            to {
              width: 50%;
            }
          }
        }
      }

      .tag_title {
        font-size: 12px;
        font-weight: bold;
        margin-top: 10px;
      }

      .tags {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

        .el-tag {
          margin: 10px 10px 0 0
        }
      }
    }
  }

  .right_box {
    // height: 500px; //自适应高度
    height: 100%;
    width: 100%;
    // background-color: pink;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px;
    overflow: auto;
    // min-width: 300px;
    box-shadow: rgba(150, 150, 255, 0.4) 5px 5px, rgba(150, 150, 255, 0.3) 10px 10px, rgba(150, 150, 255, 0.2) 15px 15px, rgba(150, 150, 255, 0.1) 20px 20px, rgba(150, 150, 255, 0.05) 25px 25px;

    .tabs {
      height: 100%;

      .flex {
        display: flex;
        height: 50px;
        align-items: center;

        .flex1 {
          flex: 1;
          margin-left: 10px;

          p {
            font-size: 14px;
            // 不换行
            white-space: nowrap;
          }
        }

        a {
          font-size: 14px;
          color: #409eff;
          cursor: pointer;
          margin-left: 10px;
          padding: 5px 0;
          // 不换行
          white-space: nowrap;

          &:hover {
            border-bottom: 1px solid #409eff;
          }
        }
      }
    }
  }
}
</style>